<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="images/zk.ico" type="image/x-icon" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/echarts.common.min.js"></script>
</head>
<body>
	<div id="main" style="width: 100%; height: 400px; margin-top: 50px;">
	</div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		
			// 初始 option
			option = {
			    title: {
			        text: '异步数据加载示例'
			    },
			    tooltip: {},
			    legend: {
			        data:['销量']
			    },
			    xAxis: {
			        data: []
			    },
			    yAxis: {},
			    series: [{
			        name: '销量',
			        type: 'bar',
			        data: []
			    }]
			};
		
		
			myChart.setOption({
			    title: {
			        text: '异步数据加载示例'
			    },
			    tooltip: {},
			    legend: {
			        data:['销量']
			    },
			    xAxis: {
			        data: []
			    },
			    yAxis: {},
			    series: [{
			        name: '销量',
			        type: 'bar',
			        data: []
			    }]
			});

			// 异步加载数据
			$.get('data.json').done(function (data) {
			    // 填入数据
			    myChart.setOption({
			        xAxis: {
			            data: data.categories
			        },
			        series: [{
			            // 根据名字对应到相应的系列
			            name: '销量',
			            data: data.data
			        }]
			    });
			});
		
		/* $.ajax({
			type : 'GET',
			url : 'Salzhuzhuangmap1',
			dataType : 'json',
			success : function(result) {

				//初始化option.xAxis[0]中的data
				option.xAxis[0].data = [];
				for (var i = 0; i < result.length; i++) {
					option.xAxis[0].data.push(result[i].detail.sname);
				}
				//初始化option.series[0]中的data
				option.series[0].data = [];
				for (var i = 0; i < result.length; i++) {
					option.series[0].data.push(result[i].num);
				}
				
			},
			error : function() {
				debugger;
			}
		});  */
		// 异步加载数据
		/* $.get('data').done(function (data) {
		 // 填入数据
		 myChart.setOption({
		 xAxis: {
		 data: data.categories
		 },
		 series: [{
		 // 根据名字对应到相应的系列
		 name: '销量',
		 data: data.data
		 }]
		 });
		 }); 8*/
	</script>
</body>
</html>